<template>
  <!-- 视频详情页 -->

  <!-- 头部 -->
  <AppHeader />

  <!-- 视频播放 -->
  <VideoPlay :videoInfo="videoInfo" v-if="store.isShow" class="VideoPlay" />

  <!-- 简介/评论 -->
  <VideoInfo :videoInfo="videoInfo" v-if="store.isShow" />

  <!-- 加载过度 -->
  <van-loading color="#0094ff" size="100" text-size="20" v-if="store.isLoaderShow" vertical>加载中···</van-loading>
</template>
<script setup lang="ts">
import AppHeader from '@/components/app-header.vue';
import VideoPlay from '@/views/Video/components/video-play.vue'
import VideoInfo from '@/views/Video/components/video-info.vue';
import { useRoute, useRouter } from 'vue-router'
import { onMounted, ref, computed, watch } from 'vue';
import axios from 'axios';
import useLoadingStore from '@/store/video-loadingStore.ts'
import { Loading as vanLoading } from 'vant'




const route = useRoute()
const router = useRouter()
const store = useLoadingStore()



// 将接口向外暴露，让其他组件也可以使用次接口
export interface IVideoInfo {
  author?: string
  authorIconSrc?: string
  commentCount?: number
  date?: string
  id?: string
  poster?: string
  playCount?: string
  likeCount?: string
  favCount?: string
  videoSrc?: string
  videoTitle?: string
}
const videoInfo = ref<IVideoInfo>({})



onMounted(async () => {
  // console.log(route.fullPath)

  const res = await axios({
    method: 'get',
    url: '/videoDetailList',
  })

  // 获取拿到的数据
  const aaa: Array<{}> = res.data.result.items

  // 通过计算属性，筛选拿到的数据
  const sb = computed(() => {
    return aaa.filter((item: IVideoInfo) => {
      return item.id === route.params.id
    }
    )
  })

  videoInfo.value = sb.value[0]





  watch(() => route.params, (newvalue) => {
    if (route.fullPath !== '/') router.push(`/video/${newvalue.id}`)

    // 仿 异步获取数据，显示“加载中···”
    store.change(false)
    store.changeLoader(true)
    setTimeout(() => {
      store.change(true)
      store.changeLoader(false)
    }, 1000);





    videoInfo.value = sb.value[0]
  })
})




</script>
<style scoped lang="scss">
.VideoPlay {
  z-index: 2;
  // overflow: hidden;
}




.van-loading {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
}
</style>@/store/video-loadingStore